<template>
	<view class="pl30 pr30 pt30 fs30">
		<view class="pb30 flex row-between col-center u-border-bottom">
			<text>头像</text>
			<view class="flex" @click="editAvatar">
				<image :src="avatar" class="w80 h80 radius80"></image>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
		</view>
		<view class="pb30 flex row-between col-center u-border-bottom pt30"  @click="showname=true">
			<text>昵称</text>
			<view class="flex col-center">
				<text class="color9 fs30">{{query.name}}</text>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
		</view>
		
		<view class="pb30 flex row-between col-center u-border-bottom pt30">
			<text>手机号</text>
			<view class="flex col-center" @click="$msg('手机号禁止修改')">
				<text class="color9 fs30">{{query.mobile}}</text>
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
		</view>
		<view class="pb30 flex row-between col-center u-border-bottom pt30" @click="$jump('/subpkg/about_us/about_us')">
			<text>关于我们</text>
			<view class="flex col-center" >
				<!-- <text class="color9 fs30">{{query.mobile}}</text> -->
				<u-icon name="arrow-right" color="#999999"></u-icon>
			</view>
		</view>
		
	    <view class="flex row-center" @click="takeout">
	    	<view class="takeoutBtn mt80 fs28 w-max" style="font-weight: 500;">退出登录</view>
	    </view>
		<view class="flex row-center mt30">
			<text class="fs28" style="color: #D23030; font-weight: 400;" @click="takeout">切换账号</text>
		</view>
			
		<!-- 底部的确认按钮 -->
		<view class="footerbtn h88" @click="submit">
			确认
		</view>
		<u-popup v-model="showname" mode='bottom'>
				<view class="h300 pl30 pr30 flex col-center w-max">
					<u-form-item label="姓名">
						<u-input v-model="query.name" placeholder="请输入您的姓名"/>
					</u-form-item>
				</view>
		</u-popup>
	<!-- 	<u-popup v-model="showmobile" mode='bottom' width='300'>
				<view class="h300 pl30 pr30 flex col-center">
					<u-form-item label="手机号" label-width="200"><u-input v-model="query.mobile" placeholder="请输入您的手机号"/></u-form-item>
				</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		name:"editUserInfo",
		onLoad() {
			// this.userInfo=uni.getStorageSync('userinfo')
			this.avatar=uni.getStorageSync('userinfo').avatar
			this.query.name=uni.getStorageSync('userinfo').name
			this.query.mobile=uni.getStorageSync('userinfo').mobile
			this.data=uni.getStorageSync('userinfo')
		},
		data() {
			return {
				avatar:'',
				query:{
					avatar:'',
					name:'',
					mobile:''
				},
				data:{},
				showname:false,
				showmobile:false,
				type: 'text',
				border: true
			};
		},
		methods: {
			editAvatar() {
				this.$tool.upload().then(res=>{
					console.log(res)
					this.query.avatar=res.id
					this.avatar=res.showImg
				})
			},
			//提交修改信息
			submit() {
				if(this.avatar==this.data.avatar&&this.query.name==this.data.name) {
					this.$msg('未修改任何信息')
					return
				}
				this.$api.changeInfo(this.query).then(async res=>{
					console.log(res)
					this.$msg(res.msg)
					//重新获取用户信息
					await this.$api.userData().then(res1=>{
						uni.setStorageSync('userinfo',res1.data)
					})
					setTimeout(()=>{
						uni.navigateBack({
							
						})
					},800)
				})
			},
			//退出登录
			takeout() {
				let that=this
				uni.showModal({
				    title: '提示',
				    content: '确认退出?',
				    success: function (res) {
				        if (res.confirm) {
							// uni.removeStorageSync('token')
							// uni.removeStorageSync('userinfo')
							// uni.removeStorageSync('config')
							uni.clearStorageSync()
							that.$msg('退出登录成功')
							setTimeout(()=>{
								uni.reLaunch({
										url:'/pages/login/login'
								})
							},800)
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #FFFFFF;
}
.footerbtn {
		position: fixed;
		width: 90%;
		left: 50%;
		bottom: 60rpx;
		transform: translateX(-50%);
		background: #D23030;
		box-shadow: 0px 2rpx 10rpx 0px rgba(210,48,48,1);
		border-radius: 44rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
	.takeoutBtn {
		height: 90rpx;
		background: #EEEEEE;
		border-radius: 90rpx;
		// border: 2rpx solid #D23030;
		text-align: center;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #999999;
	}
</style>
